<template>
    <div class="page_myGroup">
        <x-header></x-header>
        <main class="Site-content">
            <div class="divi">
                <divider>我加入的战队</divider>
            </div>
            <div class="group">
                <div class="groupName">{{group.name}}</div>
                <div class="item">
                    <div class="item_item">
                        <div class="item_title">领队：</div>
                        <div class="item_text">{{group.leader}}</div>
                    </div>
                    <div class="item_item">
                        <div class="item_title">创建时间：</div>
                        <div class="item_text">{{group.createdTime}}</div>
                    </div>
                    <div class="item_item">
                        <div class="item_title">战队总排名：</div>
                        <div class="item_text">第{{group.gruopTotalRank}}名</div>
                    </div>
                    <div class="item_item">
                        <div class="item_title">战队赛段排名：</div>
                        <div class="item_text">第{{group.gruopRank}}名</div>
                    </div>
                    <div class="item_item">
                        <div class="item_title">个人总排名：</div>
                        <div class="item_text">第{{group.personalTotalRank}}名</div>
                    </div>
                    <div class="item_item">
                        <div class="item_title">个人赛段排名：</div>
                        <div class="item_text">第{{group.personalRank}}名</div>
                    </div>
                </div>
            </div>
            <div class="notice">
                <span>温馨提示：HehaApp是万步荟行走到里约活动的唯一指定计步App，请您每天23点之前在HehaApp中上传您的步数，否则步数将丢失</span>
            </div>
            <div class="btns">
                <div class="btn_chart btn_rec_normal">
                    <span>群聊</span>
                </div>
                <div class="btn_invite btn_rec_normal">
                    <span>邀请入队</span>
                </div>
                <div class="btn_exit btn_rec_normal">
                    <span>退出战队</span>
                </div>
            </div>
            <div>
                <div class="group_num">战队成员（{{num}}人）</div>
                <ul class="group_member">
                    <li class="item" v-for="item in members">
                        <img :src="item.icon" alt="" class="item_icon" width="48"/>
                        <div class="item_name">{{item.name}}</div>
                        <div class="item_steps" style="display: inline-block;">
                            <div>当前赛段步数：{{item.personansteps}}</div>
                            <div>总步数:{{item.totalsteps}}</div>
                        </div>
                    </li>
                </ul>
            </div>
        </main>
        <x-footer></x-footer>
    </div>
</template>

<script>
    import xHeader from './common/header.vue'
    import xFooter from './common/footer.vue'
    import {Divider, XInput, Group} from 'vux'

    export default {
        name: '',
        components: {
            xHeader,
            xFooter,
            Divider,
            XInput,
            Group,
        },
        data() {
            return {
                group: {
                    name: '银河陆战队',
                    leader: '张尚华',
                    createdTime: '2016.10.10',
                    gruopTotalRank: 20,
                    gruopRank: 29,
                    personalTotalRank: 20,
                    personalRank: 500,
                },
                num: 5,
                members: [
                    {
                        icon: require("../assets/images/icon_port_01.png"),
                        name: '张小燕',
                        personansteps: '20.23万步',
                        totalsteps: '200.23万步'
                    },
                    {
                        icon: require("../assets/images/icon_port_01.png"),
                        name: '何嘉欣',
                        personansteps: '10.5万步',
                        totalsteps: '100万步'
                    },
                    {
                        icon: require("../assets/images/icon_port_01.png"),
                        name: '张尚华',
                        personansteps: '40.23万步',
                        totalsteps: '300.5万步'
                    },
                    {
                        icon: require("../assets/images/icon_port_01.png"),
                        name: '张小燕',
                        personansteps: '5.万步',
                        totalsteps: '200.23万步'
                    },
                    {
                        icon: require("../assets/images/icon_port_01.png"),
                        name: '何燕',
                        personansteps: '100.23万步',
                        totalsteps: '500.万步'
                    },
                    {
                        icon: require("../assets/images/icon_port_01.png"),
                        name: '张芳芳',
                        personansteps: '120.23万步',
                        totalsteps: '900.88万步'
                    },
                ],
            }
        },
        created() {

        },

        methods: {},

    }

</script>

<style lang="less" rel="stylesheet/less" type="text/css" scoped>
    .page_myGroup {
        font-size: .9rem;
    .group {
        color: #000;
    .groupName {
        height: 2.5rem;
        line-height: 2.5rem;
        text-align: center;
    }
    .item {
        background-color: #fff;
        padding: 1.2rem 1.2rem 1.0rem 1.2rem;
    .item_item {
        line-height: 1.5rem;
    .item_title {
        width: 10rem;
        display: inline-block;
    }
    .item_text {
        display: inline-block;
    }
    }
    }
    }
    .notice {
        color: #777;
        font-size: .8rem;
        padding: 1.1rem 1.5rem .8rem 1.2rem;
    }
    .btns {
        color: #fff;
        padding: 1rem .5rem;
    .btn_chart {
        width: 5rem;
        height: 2.7rem;
        line-height: 2.7rem;
        background-color: #2FB3A5;
        display: inline-block;
    }
    .btn_invite {
        width: 5rem;
        height: 2.7rem;
        line-height: 2.7rem;
        background-color: #F43952;
        display: inline-block;
        margin-left: 1rem;
    }
    .btn_exit {
        width: 5rem;
        height: 2.7rem;
        line-height: 2.7rem;
        background-color: #F7AB00;
        display: inline-block;
        margin-left: 1rem;
    }
    }
    .group_num {
        height: 3.2rem;
        line-height: 3.2rem;
        color: #fff;
        background-color: #F9D14A;
        padding-left: 1rem;
    }
    .group_member {
        width:100%;
        background-color: #fff;
    .item {
        width:90%;
        height: 4.3rem;
        border-bottom: 1px dashed #000;
        margin: 0 1rem;
    .item_icon {
        vertical-align:middle;
    }
    .item_name {
        width: 3rem;
        line-height: 4.3rem;
        display: inline-block;
    }
    .item_steps{
        color:#777;
        font-size:.8rem;
        vertical-align:middle;
    }
    }
    }
    }
</style>